Advanced Game Design with HTML5 and JavaScript by van der Spuy Rex

Author:van der Spuy, Rex
Language: eng
Format: epub
ISBN: 978-1-4842-5800-1
Publisher: Apress
Published: 2015-05-05T16:00:00+00:00

The game uses only the first two rows of images: the six colored circles. In Chapter 4 you learned how to use the frames function to capture multiple images on a tileset. Here’s how to use it to capture references to all six colored circles:

let marbleFrames = frames(

assets["images/marbles.png"], //The tileset image

[

[0,0],[32,0],[64,0], //A 2D array that defines the

[0,32],[32,32],[64,32] //x and y image positions

],

32, 32 //The width and height of each image

);

You can now initialize a sprite using these frames:

let marble = sprite(marbleFrames);

The marble sprite now has references to all six image frames, and you can display any of them by using gotoAndStop. Here’s how to use randomInt to make the marble display a random frame:

marble.gotoAndStop(randomInt(0, 5));

Set the marble’s circular property to true so that it will have the diameter and radius properties that the collision function needs:

marble.circular = true;

What if you want to give the marble a random diameter? Create an array of sizes and randomly assign one to the marble’s diameter property:

let sizes = [8, 12, 16, 20, 24, 28, 32];

marble.diameter = sizes[randomInt(0, 6)];

Of course, you’re not just making one marble—the game prototype has 25 of them. So it makes sense to initialize them in a grid. Here’s all the code from the game’s setup function that uses the grid function to create all 25 marble sprites.

marbles = grid(

Download

Copyright Disclaimer:
This site does not store any files on its server. We only index and link to content provided by other sites. Please contact the content providers to delete copyright contents if any and email us, we'll remove relevant links or contents immediately.